<template>
  <div>
    <el-container>
      <el-header class="homeHeader">
        <div class="title">
          SL短链接管理系统
        </div>
        <el-menu
            router
            class="el-menu-demo"
            mode="horizontal"
            background-color="#88888b"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-menu-item index="AdminPage"><i class="el-icon-s-home" style="color: #d7d5cd"></i>首页</el-menu-item>
          <el-menu-item index="ManageUsers"><i class="el-icon-s-custom" style="color: #d7d5cd"></i>用户管理</el-menu-item>
          <el-menu-item index="LinkList"><i class="el-icon-link" style="color: #d7d5cd"></i>链接管理</el-menu-item>
          <el-menu-item index="About"><i class="el-icon-ice-drink" style="color: #d7d5cd"></i>关于我们</el-menu-item>
        </el-menu>
        <el-dropdown class="userInfo" @command="commandHander">
<!--          <div class="demo-image">-->
<!--              <span class="el-dropdown-link">管理员</span>-->
<!--              <el-image-->
<!--                  style="width: 61px; height:61px"-->
<!--                  :src="url"-->
<!--                    ></el-image>-->
<!--          </div>-->
            <span class="el-dropdown-link" style="color: #873a3a">
              {{this.username}}<i class="el-icon-s-custom"></i>
            </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="setting">设置</el-dropdown-item>
                      <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                      <el-dropdown-item command="logout">注销登录</el-dropdown-item>
                    </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path!=='/HomePage'">
            <el-breadcrumb-item :to="{ path: '/AdminPage' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ this.$router.currentRoute.name }}</el-breadcrumb-item>

          </el-breadcrumb>
          <div class="homeWelcome" v-if="this.$router.currentRoute.path=='/AdminPage'">
              <AddVisits>SQ-短链接访问量走势图</AddVisits>
              <div>
              <div><UserLink>SQ-短链接新增用户及访问量折线图</UserLink></div>
              <div><LinkRank >短链接、二维码点击量排名前十柱形图</LinkRank></div>
              </div>

          </div>

          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import AddVisits from "../ChartPage/AddVisits";
import LinkRank from "../ChartPage/LinkRank";
import UserLink from "../ChartPage/UserLink";
export default {
  name: "HomePage",
  components:{'AddVisits':AddVisits,'UserLink':UserLink,'LinkRank':LinkRank},

  data(){
    return{
      username:'',
      user: window.sessionStorage.getItem('user'),
    }
  },
  computed:{
    routes(){
      return this.$store.state.routes;
    }
  },

  methods:{
    commandHander(command){
      if(command=='logout'){
        this.$confirm('此操作将注销登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //注销登录
          this.postRequest('/logout');
          //清空用户信息
          window.sessionStorage.removeItem('tokenStr');
          window.sessionStorage.removeItem('user');
          this.$store.commit('initRoutes',[]);
          this.$router.replace('/home');
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });

      }
    },
    getUserM(){
      var username= window.sessionStorage.getItem("username");
      this.username = username;

    },
  },
  mounted() {
    this.getUserM();
  }

}
</script>

<style>
  .homeHeader{
    background: #88888b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
  }
  .homeHeader .title{
    font-size: 30px;
    font-family: 华文楷体;
    color: #f2f5c2;
    margin-left: 350px;
  }

  .homeHeader .userInfo{
    cursor: pointer;
  }

  .homeWelcome{
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 30px;
    font-family: 华文楷体;

    /*color: #d7d5cd;*/
    padding-top: 50px;
  }

</style>